<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>商品详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/flexslider.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<link type="text/css" rel="stylesheet" href="css/custom.css">
	<style>
		/* 直接在页面中添加样式，确保最高优先级 */
		.single {
			padding: 40px 0;
			background: #f8f9fa !important;
		}
		
		.single-grids {
			background: #fff !important;
			border-radius: 12px !important;
			padding: 30px !important;
			box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
		}
		
		/* FlexSlider 样式优化 */
		.single-grid .flexslider {
			border: none !important;
			border-radius: 8px !important;
			overflow: hidden !important;
			margin-bottom: 0 !important;
			background: none !important;
		}
		
		.single-grid .slides img {
			border-radius: 8px !important;
			width: 100% !important;
			height: auto !important;
			object-fit: cover !important;
			aspect-ratio: 1 !important;
		}
		
		/* 缩略图容器样式 */
		.single-grid .flex-control-nav.flex-control-thumbs {
			margin: 15px 0 0 !important;
			padding: 0 !important;
			display: flex !important;
			gap: 10px !important;
			justify-content: flex-start !important;
			overflow-x: auto !important;
			scrollbar-width: none !important; /* Firefox */
			-ms-overflow-style: none !important; /* IE and Edge */
		}
		
		/* 隐藏滚动条 */
		.single-grid .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
			display: none !important;
		}
		
		/* 缩略图样式 */
		.single-grid .flex-control-thumbs li {
			width: 80px !important;
			flex: 0 0 80px !important;
			margin: 0 !important;
			padding: 0 !important;
			aspect-ratio: 1 !important;
		}
		
		.single-grid .flex-control-thumbs img {
			border-radius: 4px !important;
			border: 2px solid transparent !important;
			transition: all 0.3s ease !important;
			opacity: 0.7 !important;
			aspect-ratio: 1 !important;
			object-fit: cover !important;
		}
		
		.single-grid .flex-control-thumbs img:hover,
		.single-grid .flex-control-thumbs img.flex-active {
			border-color: #4CAF50 !important;
			opacity: 1 !important;
		}
		
		/* 其他样式保持不变 */
		.single-grid.simpleCart_shelfItem {
			padding: 0 30px !important;
		}
		
		.single-grid h3 {
			font-size: 24px !important;
			color: #333 !important;
			margin: 0 0 15px !important;
			font-weight: 600 !important;
			line-height: 1.3 !important;
		}
		
		.single-grid .tag {
			margin-bottom: 20px !important;
		}
		
		.single-grid .tag p {
			color: #666 !important;
			font-size: 14px !important;
			margin: 0 !important;
		}
		
		.single-grid .tag a {
			color: #4CAF50 !important;
			text-decoration: none !important;
		}
		
		.single-grid .tag a:hover {
			color: #45a049 !important;
		}
		
		.single-grid > p {
			color: #666 !important;
			font-size: 15px !important;
			line-height: 1.6 !important;
			margin-bottom: 25px !important;
		}
		
		.single-grid .galry {
			margin-bottom: 25px !important;
		}
		
		.single-grid .prices {
			margin-bottom: 0 !important;
			text-align: left !important;
		}
		
		.single-grid .item_price {
			font-size: 28px !important;
			color: #ff4757 !important;
			font-weight: bold !important;
			text-align: left !important;
			display: inline-block !important;
		}
		
		.single-grid .item_price:before {
			content: "¥" !important;
			font-size: 24px !important;
			margin-right: 4px !important;
		}
		
		.btn_form {
			margin-top: 25px !important;
		}
		
		.btn_form .add-cart {
			display: inline-block !important;
			padding: 12px 35px !important;
			background: #4CAF50 !important;
			color: white !important;
			border-radius: 6px !important;
			font-size: 16px !important;
			text-decoration: none !important;
			transition: all 0.3s ease !important;
			border: none !important;
			text-align: center !important;
			width: auto !important;
		}
		
		.btn_form .add-cart:hover {
			background: #45a049 !important;
			transform: translateY(-2px) !important;
		}
		
		.single-grid1 {
			padding-left: 30px !important;
		}
		
		.single-grid1 ul {
			list-style: none !important;
			padding: 0 !important;
			margin: 0 !important;
			background: #f8f9fa !important;
			border-radius: 8px !important;
			overflow: hidden !important;
		}
		
		.single-grid1 ul li {
			border-bottom: 1px solid #eee !important;
		}
		
		.single-grid1 ul li:last-child {
			border-bottom: none !important;
		}
		
		.single-grid1 ul li a {
			display: block !important;
			padding: 12px 20px !important;
			color: #555 !important;
			text-decoration: none !important;
			transition: all 0.3s ease !important;
			font-size: 14px !important;
		}
		
		.single-grid1 ul li a:hover {
			background: #4CAF50 !important;
			color: white !important;
		}
		
		@media (max-width: 991px) {
			.single-grid.simpleCart_shelfItem {
				padding: 30px 0 !important;
			}
			
			.single-grid1 {
				padding-left: 0 !important;
				margin-top: 30px !important;
			}
		}
		
		@media (max-width: 767px) {
			.single-grids {
				padding: 20px !important;
			}
			
			.single-grid h3 {
				font-size: 20px !important;
			}
			
			.single-grid .item_price {
				font-size: 24px !important;
			}
			
			.btn_form .add-cart {
				width: 100% !important;
				padding: 10px 20px !important;
			}
			
			.single-grid .flex-control-thumbs li {
				width: 60px !important;
				flex: 0 0 60px !important;
			}
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript" src="js/cart.js"></script>
	<script>
		$(function() {
		  $('.flexslider').flexslider({
			animation: "slide",
			controlNav: "thumbnails",
			smoothHeight: true,
			slideshow: false
		  });
		});
	</script>
</head>
<body>
	 
	<jsp:include page="header.jsp"/>
	
	<!--//single-page-->
	<div class="single">
		<div class="container">
			<div class="single-grids">				
				<div class="col-md-4 single-grid">		
					<div class="flexslider">
						<%-- <div class="thumb-image"> <img src="../${good.cover}" data-imagezoom="true" class="img-responsive"> </div> --%>
						<ul class="slides">
							<li data-thumb="../${good.cover}">
								<div class="thumb-image"> <img src="../${good.cover}" data-imagezoom="true" class="img-responsive"> </div>
							</li>
							<li data-thumb="../${good.image1}">
								 <div class="thumb-image"> <img src="../${good.image1}" data-imagezoom="true" class="img-responsive"> </div>
							</li>
							<li data-thumb="../${good.image2}">
							   <div class="thumb-image"> <img src="../${good.image2}" data-imagezoom="true" class="img-responsive"> </div>
							</li> 
						</ul>
					</div>
				</div>	
				<div class="col-md-4 single-grid simpleCart_shelfItem">		
					<h3>${good.name}</h3>
					<div class="tag">
						<p>分类 : <a href="goods?typeid=${good.type.id}">${good.type.name}</a></p>
					</div>
					<p>介绍: ${good.intro}</p>
					<div class="galry">
						<div class="prices">
							<h5 class="item_price">${good.price}</h5>
						</div>
					</div>
					<div class="btn_form">
						<a href="javascript:;" class="add-cart item_add" onclick="buy(${good.id})">加入购物车</a>	
					</div>
				</div>
				<div class="col-md-4 single-grid1">
					<h4 style="margin-bottom: 20px; color: #333; font-weight: 600;">商品分类</h4>
					<ul>
						<c:forEach var="type" items="${typeList}">
							<li><a href="goods?typeid=${type.id}">${type.name}</a></li>
						</c:forEach>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	
	<!--related-products--><!-- 
	<div class="related-products">
		<div class="container">
			<h3>猜你喜欢</h3>
			<div class="product-model-sec single-product-grids">
				<div class="product-grid single-product">
					<a href="single.html">
					<div class="more-product"><span> </span></div>						
					<div class="product-img b-link-stripe b-animate-go  thickbox">
						<img src="images/m1.png" class="img-responsive" alt="">
						<div class="b-wrapper">
						<h4 class="b-animate b-from-left  b-delay03">							
						<button>View</button>
						</h4>
						</div>
					</div>
					</a>					
					<div class="product-info simpleCart_shelfItem">
						<div class="product-info-cust prt_name">
							<h4>Product #1</h4>								
							<span class="item_price">$2000</span>
							<div class="ofr">
							  <p class="pric1"><del>$2300</del></p>
							  <p class="disc">[15% Off]</p>
							</div>
							<div class="clearfix"> </div>
						</div>												
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
 -->	<!--related-products-->	
	
	<jsp:include page="footer.jsp"/>

</body>
</html>